<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.prime.com.tr/ui">
    <li class="clearFix widget widget_pages">

        <h3 class="widget_title">#{msgs['guestzone.title']}</h3>
    <h:form id="frmLogin">
        <p:dialog id="dlgLogin" header="#{msgs['login.title']}" widgetVar="dlgLogin" modal="true" resizable="false" styleClass="autoSizeDialog">

            <h:panelGrid columns="2" cellpadding="5" id="grdLogin" styleClass="tblNeedPadding">
                <h:outputLabel for="username" value="#{msgs['login.usernameText']}"/>
                <p:inputText value="#{credentials.username}"
                             id="username" required="true" label="#{msgs['login.usernameText']}"/>

                <h:outputLabel for="password" value="#{msgs['login.passwordText']}"/>
                <p:password value="#{credentials.password}" feedback="false" minLength="1"
                            id="password" required="true" label="#{msgs['login.passwordText']}"/>
                <f:facet name="footer">

                    <div align="center">
                        <p:commandButton value="#{msgs['login.loginText']}" image="ui-icon ui-icon-person" action="#{loginController.login}" type="submit" update="growl"/>
                        &nbsp;<p:commandButton value="#{msgs['login.cancelText']}" image="ui-icon ui-icon-closethick" onclick="dlgLogin.hide()"/>
                    </div>
                </f:facet>
            </h:panelGrid>
        </p:dialog>
    </h:form>

    <h:form id="frmRegister">
        <p:dialog id="dlgRegister" header="#{msgs['register.title']}" widgetVar="dlgRegister" modal="true" resizable="false" width="0" styleClass="autoSizeDialog">
            <h:panelGrid columns="2" cellpadding="5" id="grdRegister" styleClass="tblNeedPadding">

                <h:outputLabel for="username" value="#{msgs['register.usernameText']}"/>
                <p:inputText value="#{registerController.model.username}" validator="#{registerController.validateUsernameExists}"
                             id="username" required="true" label="#{msgs['register.fullnameText']}"/>

                <h:outputLabel for="password" value="#{msgs['register.passwordText']}"/>
                <p:password value="#{registerController.model.password}" feedback="true" minLength="1"
                            id="password" required="true" label="#{msgs['register.usernameText']}"/>

                <h:outputLabel for="confirmPassword" value="#{msgs['register.confirmPwdText']}"/>
                <p:password feedback="false" minLength="1"
                            id="confirmPassword" required="true" label="#{msgs['register.confirmPwdText']}">
                    <f:validator validatorId="confirmPasswordValidator" />
                    <f:attribute name="passwordId" value="frmRegister:password" />
                    <f:attribute name="errorRes" value="validator.register.wrongConfirmPwd" />
                </p:password>

                <h:outputLabel for="email" value="#{msgs['register.emailText']}"/>
                <p:inputText value="#{registerController.model.email}" validator="#{registerController.validateEmailExists}"
                             id="email" required="true" label="#{msgs['register.emailText']}"/>

                <h:outputLabel for="fullname" value="#{msgs['register.fullnameText']}"/>
                <p:inputText value="#{registerController.model.fullname}"
                             id="fullname" required="true" label="#{msgs['register.fullnameText']}"/>

                <h:outputLabel for="dob" value="#{msgs['register.dobText']}"/>
                <p:inputMask value="#{registerController.model.dob}" mask="99/99/9999"
                             id="dob" required="true" label="#{msgs['register.dobText']}">
                    <f:convertDateTime pattern="dd/MM/yyyy"/>
                </p:inputMask>

                <h:outputLabel for="address" value="#{msgs['register.addressText']}"/>
                <p:inputText value="#{registerController.model.address}"
                             id="address" required="true" label="#{msgs['register.addressText']}"/>

                <h:outputLabel for="phonenumber" value="#{msgs['register.phonenumberText']}"/>
                <p:inputText value="#{registerController.model.phoneNumber}"
                             id="phonenumber" required="true" label="#{msgs['register.phonenumberText']}"/>

                <h:outputLabel for="roles" value="#{msgs['register.roleText']}"/>
                <h:selectOneRadio id="roles" value="#{registerController.roleId}" label="#{msgs['register.roleText']}">
                    <f:selectItem id="buyer" itemLabel="Buyer" itemValue="3" />
                    <f:selectItem id="seller" itemLabel="Seller" itemValue="4" />
                </h:selectOneRadio>

                <f:facet name="footer">
                    <div align="center">
                        <p:commandButton id="registerBtn" value="#{msgs['register.registerText']}" image="ui-icon ui-icon-key" action="#{registerController.register}" type="submit" update="growl"/>
                        &nbsp;<p:commandButton value="#{msgs['register.cancelText']}" image="ui-icon ui-icon-closethick" onclick="dlgRegister.hide()"/>
                    </div>
                </f:facet>
            </h:panelGrid>
        </p:dialog>
    </h:form>
    <h:form id="frmGuestZone">
        <ul>
            <li class="page_item"><p:commandLink title="#{msgs['login.title']}" value="#{msgs['login.title']}" update="frmLogin:grdLogin" oncomplete="dlgLogin.show()"/></li>
            <li class="page_item"><p:commandLink title="#{msgs['register.title']}" value="#{msgs['register.title']}" update="frmRegister:grdRegister" oncomplete="dlgRegister.show()"/></li>
        </ul>
    </h:form>
</li>
</ui:composition>